<!--仓库管理-->
<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item class="form-button-right">
				<el-button v-auth="'module:assetStorage:save'" type="primary" @click="addOrUpdateHandle()">新增仓库</el-button>
				<el-button v-auth="'module:assetStorage:delete'" type="danger" @click="deleteBatchHandle()">更多操作</el-button>
			</el-form-item>

			<el-form-item>
				<KeyQuery v-model="state.queryForm.keyword" @getDataList="getDataList()" />
			</el-form-item>
		</el-form>

		<el-table
			v-if="refreshTable"
			v-loading="state.dataListLoading"
			:default-expand-all="isExpandAll"
			:data="state.dataList"
			row-key="id"
			border
			style="width: 100%"
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="id" label="主键" header-align="center" align="center" v-if="false"></el-table-column>
			<el-table-column prop="pid" label="上级id" header-align="center" align="center" v-if="false"></el-table-column>

			<el-table-column prop="name" label="仓库名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="code" label="仓库编码" header-align="center" align="center"></el-table-column>
			<el-table-column prop="site" label="仓库地址" header-align="center" align="center"></el-table-column>
			<el-table-column prop="isEnable" label="是否启用" header-align="center" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.isEnable === '0'" type="info">禁用</el-tag>
					<el-tag v-if="scope.row.isEnable === '1'" type="success">启用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="remark" label="备注" header-align="center" align="center">
				<template #default="scope">
					{{ scope.row.remark ? scope.row.remark : '-' }}
				</template>
			</el-table-column>

			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="250">
				<template #default="scope">
					<el-button v-auth="'module:assetStorage:update'" type="primary" link @click="addSubset(scope.row.id)">添加下级</el-button>
					<el-button v-auth="'module:assetStorage:update'" type="primary" link @click="editIsEnable(scope.row)" v-if="scope.row.isEnable === '1'">
						停用
					</el-button>
					<el-button v-auth="'module:assetStorage:update'" type="primary" link @click="editIsEnable(scope.row)" v-if="scope.row.isEnable === '0'">
						启用
					</el-button>
					<el-button v-auth="'module:assetStorage:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
					<el-button v-auth="'module:assetStorage:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList" width="500"></add-or-update>
	</el-card>
</template>

<script setup lang="ts" name="ModuleAsset/storageIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useEditIsEnable } from '@/api/nb/asset/storage'
import { ElMessage, ElMessageBox } from 'element-plus'

import AddOrUpdate from './plane/storage-a-u.vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/nb/asset/storage/list',
	deleteUrl: '/nb/asset/storage/delete',
	queryForm: {},
	isPage: false
})

// 是否展开，默认全部折叠
const isExpandAll = ref(true)
// 是否重新渲染表格状态
const refreshTable = ref(true)

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.dataPList = fnPDataList()
	addOrUpdateRef.value.init(id)
	addOrUpdateRef.value.dataForm.pid = '0'
}

//添加下级页面
const addSubset = (id?: number) => {
	addOrUpdateRef.value.dataPList = fnPDataList()
	addOrUpdateRef.value.init()
	addOrUpdateRef.value.dataForm.pid = id
}

const fnPDataList = () => {
	var aa: any[] = []
	Object.assign(aa, state.dataList)
	aa?.unshift({
		id: '0',
		name: '一级类型'
	})
	return aa
}

//启用
const editIsEnable = (dataForm: any) => {
	ElMessageBox.confirm('确定进行启用?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			dataForm.isEnable = dataForm.isEnable === '0' ? '1' : '0'

			useEditIsEnable(dataForm).then(res => {
				ElMessage.success({
					message: '操作成功',
					duration: 500
				})
			})
		})
		.catch(() => {})
}

const { getDataList, selectionChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
